<template>
	<div class="container">
		<!-- 搜索 -->
		<search-Bar
			:searchBarData="searchBarData"
			@refreshSearch="refreshList"
		></search-Bar>
		<my-table
			:table-data="tableData"
			:col-configs="colConfigs"
			:list-loading="listLoading"
			:total="total"
			:page-size="listQuery.pagesize"
			@refreshList="getList"
		>
			<el-table-column label="访问途径" slot="opt">
				<template slot-scope="{ row }">
					<span v-if="row.client_kind === 1">医生站</span>
					<span v-if="row.client_kind === 2">APP</span>
					<span v-if="row.client_kind === 3">微信</span>
					<span v-if="row.client_kind === 4">网站</span>
					<span v-if="row.client_kind === 5">H5</span>
				</template>
			</el-table-column>
			<el-table-column label="患者类型" slot="patientClass">
				<template slot-scope="{ row }">
					<span v-if="row.patient_class === 0">门诊</span>
					<span v-if="row.patient_class === 1">住院</span>
					<span v-if="row.patient_class === 2">急诊</span>
					<span v-if="row.patient_class === 3">体检</span>
					<span v-if="row.patient_class === 4">普通</span>
				</template>
			</el-table-column>
			<el-table-column label="患者性别" slot="patientSex">
				<template slot-scope="{ row }">
					<span v-if="row.patient_sex === 0">未知</span>
					<span v-if="row.patient_sex === 1">男</span>
					<span v-if="row.patient_sex === 2">女</span>
				</template>
			</el-table-column>
		</my-table>
	</div>
</template>

<script>
import searchBar from '@/components/searchBar'
import myTable from '@/components/myTable'
import { getPatientList } from '@/api/log-mg'
export default {
	name: 'DoctorVist',
	components: {
		myTable,
		searchBar,
	},
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
			},
			timeTypeList: [
				{ value: 0, label: '访问时间' }
			],
			colConfigs: [
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{ slot: 'opt' },
				/* 	{
						prop: 'user_id',
						label: '访问账号',
						sortable: false,
					}, */
				{ slot: 'patientClass' },
				{
					prop: 'patient_name',
					label: '患者姓名',
					sortable: false,
				},

				/* 	{
						prop: 'depart_name',
						label: '所属科室',
						sortable: false,
					},
	 			*/

				{ slot: 'patientSex' },
				{
					prop: 'age',
					label: '患者年龄',
					sortable: false,
				},

				{
					prop: 'accession_number',
					label: '检查编号',
					sortable: false,
					width: '200px'
				},
				{
					prop: 'exam_type',
					label: '检查类型',
					sortable: false,
				},
				{
					prop: 'exam_item',
					label: '检查项目',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'depart_name',
					label: '检查科室',
					sortable: false,
				},
				{
					prop: 'perform_time',
					label: '检查时间',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'archive_date',
					label: '归档时间',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'create_date',
					label: '访问时间',
					sortable: false,
					width: '180px'
				},
				{
					prop: 'client_host',
					label: '访问地址',
					sortable: false,
					width: '200px'
				},

			],
			tableData: null,
			total: null,
			listLoading: false,
			searchBarData: {
				timeTypeList: [
					// { label: '不限', value: null },
					{ label: '访问时间', value: 1 },
					/* 	{ label: '检查时间', value: 1 },
						{ label: '归档时间', value: 4 }, */
				],
				customQueryList: [
					// { label: '不限', value: null },
					{ label: '检查编号', value: 1 },
					{ label: '患者编号', value: 2 },
					// { label: '调阅账号', value: 3 },
					/* 	{ label: '病历号', value: 2 },
						{ label: '患者姓名', value: 3 },
						{ label: '身份证号', value: 4 },
						{ label: '申请单号', value: 5 },
						{ label: '门诊号', value: 6 },
						{ label: '住院号', value: 7 },
						{ label: '医生姓名', value: 8 }, */
				]
			},
		}
	},
	computed: {},
	created () { },
	mounted () {
		this.getList()
	},
	methods: {
		getList ( val ) {
			// todo  h获取任务统计
			this.listQuery = Object.assign( this.listQuery, val )
			getPatientList( this.listQuery ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data
					this.total = res.page.total_count
				}
			} )
		},
		refreshList ( val ) {
			let obj = {
				start_date: null,
				end_date: null,
				custom_query_type: null,
				custom_query_value: null,
			}
			if ( val ) {
				obj = {
					start_date: val.start_time,
					end_time: val.end_time,
					custom_query_type: val.custom_query_type,
					custom_query_value: val.custom_query_value,
				}
			}
			this.listQuery = Object.assign( this.listQuery, obj )
			this.getList( this.listQuery )
		}
	},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
	.data {
		// height: 161px;
		padding: 43px 0;
		box-shadow: 0px 0px 14px 0px rgba(1, 1, 100, 0.1);
		border-radius: 8px;
		margin-bottom: 42px;
		text-align: center;
		div {
			height: 75px;
			width: 12%;
			display: inline-block;
			border-right: 1px solid #ddd;
			text-align: center;
			h2 {
				font-size: 16px;
				font-weight: normal;
				height: 42px;
				line-height: 22px;
				color: #333333;
			}
			h3 {
				height: 42px;
				font-size: 30px;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				line-height: 42px;
				color: @49B523;
			}
		}
		> :last-child {
			border: none !important;
		}
		> :last-child,
		> :nth-child(5) {
			h3 {
				color: @FF6F6F;
			}
		}
		> :nth-child(6) {
			h3 {
				color: @333;
			}
		}
	}
}
</style>
